<template>
    <div class="selct-j">
        <a-select @change="change" show-search @search="handleSearch" @blur="blurHandler" :filter-option="false" :value="selectValue" :placeholder="placeholder" allowClear mode="multiple">
            <a-select-option v-for="item in slectOptions" :key="item.id"  :value="item.id">{{item.name}}</a-select-option>
        </a-select>
        <div class="right">
            <div class="ml-20 more" v-if="!show" @click="show = !show">更多</div>
            <a-radio-group v-if="show" class="ml-20" :default-value="selectType" @change="onChangeRadio">
                <a-radio :value="0">正选</a-radio>
                <a-radio :value="1">反选</a-radio>
            </a-radio-group>
        </div>
    </div>
</template>

<script>
import { brands } from '../../micromall/util/brand'
export default {
    name: '',
    props: {
        options:{
            type: Array,
            default: () => []
        },
        value: {
            type: Object
        },
        placeholder: {
            type: String,
            default: ''
        },
        allowClear: {
            type: Boolean,
            default: false
        },
        mode: {
            type: String,
            default: 'multiple'
        },
    },
    data() {
        return {
            show: false,
            selectType: 0,
            selectValue: undefined,
            keyword:''
        }
    },
    mounted(){
        console.log(this.url)
    },
    watch: {
        value(n) {
            if (n) {
                const { selectValue, selectType } = n
                this.selectValue = selectValue
                this.selectType = selectType == 0 ? selectType : 1
            }
        },
    },
    computed:{
      slectOptions(){
        const { options } = this.$props
        const { selectValue } = this.$props.value || {}
        const { keyword } = this
        console.log(selectValue)
        if(!options) return []
        let befor = keyword =='' ? options.slice(0,200) : options.filter(item => item.name.includes(keyword)).slice(0,200)
        if(!selectValue) return befor
        const checked = options.filter(item => selectValue.includes(item.id))
        console.log(checked)
        return Array.from(new Set(befor.concat(checked)))
      }
    },
    components: {},
    methods: {
        onChangeRadio(e) {
            this.selectType = e.target.value
            this.triggerChange({ selectValue: this.selectValue, selectType: this.selectType })

        },
        blurHandler(){
          this.keyword = ''
            // let { options } = this.$props
            // const { selectValue } = this
            // let checked = []
            // let befor = options.slice(0,200)
            // // 选中的筛选出来
            // if(selectValue && selectValue.length > 0){
            //     checked = options.filter(item => selectValue.includes(item.id))
            // }
            // // 去重
            // this.slectOptions = Array.from(new Set(befor.concat(checked)) )
        },
        handleSearch(value){
          this.keyword = value
            // const { options } = this.$props
            // this.slectOptions =  (value == '' ?  options : options.filter(item => item.name.includes(value))).slice(0,200)
        },
        change(e) {
            console.log(e)
            this.selectValue = e
            this.triggerChange({ selectValue: this.selectValue, selectType: this.selectType })
        },
        triggerChange(changedValue) {
            this.$emit('change', Object.assign({}, changedValue));
        },
    }
}
</script>

<style scoped>
.selct-j {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}
.right{
    flex-shrink: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    right: 0;
    height: 100%;
    top: 0;
    transform: translateX(100%);
}

.ml-20 {
    margin-left: 20px;
}

.more {
    cursor: pointer;
}
</style>

    